<template>
  <div id="wrap" :style="{ fontSize:fontSize + 'px', background: background }">
    <div class="v-header"
      :class="{ shadown : isShadown }">
      <div class="left">
        <i v-if="back"
          @click="$router.go(-1)"
          class="iconfont icon-xiangzuo1"
          :class="iconClass"
          :style="{ color : iconColor }"></i>

      </div>
      <div class="center">
        <a>{{title}}</a>
      </div>
      <div class="right">
        <i class="iconfont righticon"
          @click="$emit('clickRightIcon')"
          :class="rightIcon"></i>
        <a @click="$emit('clickRightIcon')">{{rightText}}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'header',
  data () {
    return {
      fontSize: 10
    }
  },
  props: {
    title: {
      default: '',
      type: String
    },
    rightText: {
      default: '',
      type: String
    },
    isShadown: {
      default: false,
      type: Boolean
    },
    iconColor: {
      default: '',
      type: String
    },
    background: {
      default: '#FFF',
      type: String
    },
    iconClass: {
      default: '',
      type: String
    },
    back: {
      default: true,
      type: Boolean
    },
    rightIcon: {
      default: '',
      type: String
    }
  },
  methods: {

  },
  created () {
    this.fontSize = this.fontSize * document.body.offsetWidth / 320
  }
}
</script>

<style lang="less" scoped>
* {
  display: flex;
  justify-content: center;
  align-items: center;
}
#wrap {
  width: 100%;
  background: white;
  position: fixed;
  z-index: 999;
  top: 0;
}
.v-header {
  height: 50px;
  flex: 1;
  padding-top: 10px;
  background: white;
  border-bottom: 1px solid #E9E9E9;
  .left {
    justify-content: flex-start;
    transform: translateX(10px);
    flex: 1;
    i {
      font-size: 1.6em;
      color: #7F7A8E;
    }
  }
  .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    transform: translateX(-10px);
  }
  .center {
    flex: 2;
    a {
      font-size: 1.6em;
      color: #666;
      letter-spacing: 2px;
    }
  }
}
.righticon {
  font-size: 2.6rem;
  transform: translateY(3px);
}
.shadown {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
}
</style>
